<template>
    <div class="article-manage-container">
        <a-tabs default-active-key="1" :tabBarGutter="10">
            <a-tab-pane key="1">
                <span @click="viewAllBlog" slot="tab">
                    全部({{ totalNumber }})
                </span>
                <div>
                    <div class="total-container">
                        <div class="total-container-top">
                            <p class="total-container-top-text">筛选：</p>
                            <div class="total-container-top-date">
                                <a-date-picker
                                        style="width:120px;"
                                        v-model="startValue"
                                        :disabled-date="disabledStartDate"
                                        show-time
                                        format="YYYY-MM-DD"
                                        placeholder="Start"
                                        @openChange="handleStartOpenChange"
                                        @change="onStartChange"
                                />
                                <a-date-picker
                                        style="width:120px; margin-left: 10px;"
                                        v-model="endValue"
                                        :disabled-date="disabledEndDate"
                                        show-time
                                        format="YYYY-MM-DD"
                                        placeholder="End"
                                        :open="endOpen"
                                        @openChange="handleEndOpenChange"
                                        @change="onEndChange"
                                />
                            </div>
                            <div class="blog-type">
                                <a-select placeholder="文章类型" style="width: 120px" @change="handleBlogType">
                                    <a-select-option value="">
                                        不限
                                    </a-select-option>
                                    <a-select-option :value="blogType.type" v-for="blogType in blogTypes"
                                                     :key="blogType.type">
                                        {{blogType.type}}
                                    </a-select-option>
                                </a-select>
                            </div>

                            <div class="blog-classification">
                                <a-select placeholder="分类专栏"
                                          style="width: 120px"
                                          @change="handleBlogClassification">
                                    <a-select-option value="">
                                        不限
                                    </a-select-option>
                                    <a-select-option :value="i.categoryName" v-for="i in blogClassifications"
                                                     :key="i.id">
                                        {{i.categoryName}}
                                    </a-select-option>
                                </a-select>
                            </div>
                            <div class="keyword-input">
                                <a-input style="width: 200px;" v-model="filterObj.keyword" placeholder="keyword"/>
                            </div>
                            <a-button style="margin-left: 18px;" type="danger" @click="findAllBlogByFuzzy">搜索</a-button>
                        </div>
                        <div v-if="showDiv" class="total-container-bottom">
                            <div>
                                <a-radio-group v-model="filterObj.blogStatus">
                                    <a-radio class="radio-blog-status" :value="null">
                                        全部
                                    </a-radio>
                                    <a-radio class="radio-blog-status" :value="1">
                                        只显示已发布的文章
                                    </a-radio>
                                    <a-radio class="radio-blog-status" :value="2">
                                        只显示私密文章
                                    </a-radio>
                                    <a-radio class="radio-blog-status" :value="0">
                                        只显示草稿文章
                                    </a-radio>
                                </a-radio-group>
                                <a-button type="primary" ghost @click="resetSearch">重置搜索</a-button>
                            </div>
                        </div>
                    </div>
                    <div class="blog-info-list" v-for="(blogInfoVO, index) in blogInfoVOs" :key="index">
                        <div class="blog-info-title"><a href="#">{{ blogInfoVO.blogInfo.title }}</a></div>
                        <div class="blog-info-props">
                            <div>
                                <div style="float: left;">{{ blogInfoVO.blogInfo.blogType.type }}</div>
                                <div style="float: left; margin-left: 25px;">{{ blogInfoVO.blogInfo.createTime }}</div>
                                <div style="float: left; margin-left: 15px;">
                                    <svg-icon icon="iconfuhao-yuedu" size="15" color="darkgrey"></svg-icon>&nbsp;&nbsp;{{
                                    blogInfoVO.countForBlog.blogPVNumber }}
                                </div>
                                <div style="float: left; margin-left: 15px;">
                                    <svg-icon icon="iconpinglun" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                    blogInfoVO.countForBlog.likeNumber }}
                                </div>
                                <div style="float: left; margin-left: 15px;">
                                    <svg-icon icon="iconshoucang2" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                    blogInfoVO.countForBlog.favoriteNumber }}
                                </div>
                            </div>
                            <div>
                                <div style="float:right;" @click="removeBlog">删除</div>
                                <div style="float:right; margin-right: 15px;"><a
                                        @click="toViewBlog(blogInfoVO.blogInfo.id)">查看</a></div>
                            </div>

                        </div>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2">
                <span @click="viewPublicBlog" slot="tab">
                    公开({{ publicNumber }})
                </span>
                <div class="blog-info-list" v-for="(blogInfoVO, index) in blogInfoVOs" :key="index">
                    <div class="blog-info-title"><a href="#">{{ blogInfoVO.blogInfo.title }}</a></div>
                    <div class="blog-info-props">
                        <div>
                            <div style="float: left;">{{ blogInfoVO.blogInfo.blogType.type }}</div>
                            <div style="float: left; margin-left: 25px;">{{ blogInfoVO.blogInfo.createTime }}</div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconfuhao-yuedu" size="15" color="darkgrey"></svg-icon>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.blogPVNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconpinglun" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.likeNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconshoucang2" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.favoriteNumber }}
                            </div>
                        </div>
                        <div>
                            <div style="float:right;" @click="removeBlog">删除</div>
                            <div style="float:right; margin-right: 15px;"><a
                                    @click="toViewBlog(blogInfoVO.blogInfo.id)">查看</a></div>
                        </div>

                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="3">
                <span @click="viewPrivateBlog" slot="tab">
                    私密({{ privateNumber }})
                </span>
                <div class="blog-info-list" v-for="(blogInfoVO, index) in blogInfoVOs" :key="index">
                    <div class="blog-info-title"><a href="#">{{ blogInfoVO.blogInfo.title }}</a></div>
                    <div class="blog-info-props">
                        <div>
                            <div style="float: left;">{{ blogInfoVO.blogInfo.blogType.type }}</div>
                            <div style="float: left; margin-left: 25px;">{{ blogInfoVO.blogInfo.createTime }}</div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconfuhao-yuedu" size="15" color="darkgrey"></svg-icon>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.blogPVNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconpinglun" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.likeNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconshoucang2" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.favoriteNumber }}
                            </div>
                        </div>
                        <div>
                            <div style="float:right;" @click="removeBlog">删除</div>
                            <div style="float:right; margin-right: 15px;"><a
                                    @click="toViewBlog(blogInfoVO.blogInfo.id)">查看</a></div>
                        </div>

                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="4">
                <span @click="viewAuditBlog" slot="tab">
                    审核({{ auditNumber }})
                </span>
                <div class="blog-info-list" v-for="(blogInfoVO, index) in blogInfoVOs" :key="index">
                    <div class="blog-info-title"><a href="#">{{ blogInfoVO.blogInfo.title }}</a></div>
                    <div class="blog-info-props">
                        <div>
                            <div style="float: left;">{{ blogInfoVO.blogInfo.blogType.type }}</div>
                            <div style="float: left; margin-left: 25px;">{{ blogInfoVO.blogInfo.createTime }}</div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconfuhao-yuedu" size="15" color="darkgrey"></svg-icon>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.blogPVNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconpinglun" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.likeNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconshoucang2" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.favoriteNumber }}
                            </div>
                        </div>
                        <div>
                            <div style="float:right;" @click="removeBlog">删除</div>
                            <div style="float:right; margin-right: 15px;"><a
                                    @click="toViewBlog(blogInfoVO.blogInfo.id)">查看</a></div>
                        </div>

                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="5">
                <span @click="viewDraftBlog" slot="tab">
                    草稿({{ draftNumber }})
                </span>
                <div class="blog-info-list" v-for="(blogInfoVO, index) in blogInfoVOs" :key="index">
                    <div class="blog-info-title"><a href="#">{{ blogInfoVO.blogInfo.title }}</a></div>
                    <div class="blog-info-props">
                        <div>
                            <div style="float: left;">{{ blogInfoVO.blogInfo.blogType.type }}</div>
                            <div style="float: left; margin-left: 25px;">{{ blogInfoVO.blogInfo.createTime }}</div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconfuhao-yuedu" size="15" color="darkgrey"></svg-icon>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.blogPVNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconpinglun" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.likeNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconshoucang2" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.favoriteNumber }}
                            </div>
                        </div>
                        <div>
                            <div style="float:right;" @click="removeBlog">删除</div>
                            <div style="float:right; margin-right: 15px;"><a
                                    @click="toViewBlog(blogInfoVO.blogInfo.id)">查看</a></div>
                        </div>

                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="6">
                <span @click="viewRecycleBlog" slot="tab">
                    回收站({{ recycleNumber }})
                </span>
                <div class="blog-info-list" v-for="(blogInfoVO, index) in blogInfoVOs" :key="index">
                    <div class="blog-info-title"><a href="#">{{ blogInfoVO.blogInfo.title }}</a></div>
                    <div class="blog-info-props">
                        <div>
                            <div style="float: left;">{{ blogInfoVO.blogInfo.blogType.type }}</div>
                            <div style="float: left; margin-left: 25px;">{{ blogInfoVO.blogInfo.createTime }}</div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconfuhao-yuedu" size="15" color="darkgrey"></svg-icon>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.blogPVNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconpinglun" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.likeNumber }}
                            </div>
                            <div style="float: left; margin-left: 15px;">
                                <svg-icon icon="iconshoucang2" size="15" color="darkgrey"/>&nbsp;&nbsp;{{
                                blogInfoVO.countForBlog.favoriteNumber }}
                            </div>
                        </div>
                        <div>
                            <div style="float:right;" @click="removeBlog">删除</div>
                            <div style="float:right; margin-right: 15px;"><a
                                    @click="toViewBlog(blogInfoVO.blogInfo.id)">查看</a></div>
                        </div>

                    </div>
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>

    import {findAllBlogByFuzzy} from "@/api/blog/blogInfo";
    import {findAllCategoryColumn} from "@/api/blog/blogCategoryColumn";
    import {findAllBlogType} from "@/api/blog/blogType";
    import {countForOneBlog, countForBlogManage} from "@/api/blog/blogStatistics";

    export default {
        name: "article-manage",
        data() {
            return {
                totalNumber: 0,
                publicNumber: 0,
                privateNumber: 0,
                auditNumber: 0,
                draftNumber: 0,
                recycleNumber: 0,
                startValue: null,
                endValue: null,
                endOpen: false,
                showDiv: false,
                blogTypes: [],
                blogClassifications: [],
                filterObj: {
                    userId: null,
                    blogStatus: null,
                    blogType: null,
                    blogCategory: null,
                    startTime: null,
                    endTime: null,
                    keyword: null
                },
                blogInfoVOs: []
            }
        },
        watch: {
            startValue(val, date) {
                console.log('startValue', val, date);
            },
            endValue(val) {
                console.log('endValue', val);
            },
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.findAllBlogType();
                this.findAllCategoryColumn();
                this.countForBlogManage();
                this.findAllBlogByFuzzyInit();
            },
            /* 开始时间 */
            onStartChange(date, dateString) {
                this.filterObj.startTime = dateString
                console.log(date, dateString);
            },
            /* 结束时间 */
            onEndChange(date, dateString) {
                this.filterObj.endTime = dateString
                console.log(date, dateString);
            },
            disabledStartDate(startValue) {
                const endValue = this.endValue;
                if (!startValue || !endValue) {
                    return false;
                }
                return startValue.valueOf() > endValue.valueOf();
            },
            disabledEndDate(endValue) {
                const startValue = this.startValue;
                if (!endValue || !startValue) {
                    return false;
                }
                return startValue.valueOf() >= endValue.valueOf();
            },
            handleStartOpenChange(open) {
                if (!open) {
                    this.endOpen = true;
                }
            },
            handleEndOpenChange(open) {
                this.endOpen = open;
            },
            /* 博客分类专栏下拉框回调函数 */
            handleBlogClassification(value) {
                this.filterObj.blogCategory = value
                console.log("value: ", value)
            },
            /* 博客类型下拉框回调函数 */
            handleBlogType(value) {
                this.filterObj.blogType = value
                console.log("value: ", value)
            },
            /* 获取blogInfoVOs */
            async commonMethod(data) {
                const blogInfoVOs = []
                for (const blogInfo of data) {
                    const blogInfoVO = {
                        blogInfo: {},
                        countForBlog: {}
                    }
                    const data = await countForOneBlog(blogInfo.id)
                    blogInfoVO.blogInfo = blogInfo
                    blogInfoVO.countForBlog = data
                    blogInfoVOs.push(blogInfoVO)
                }
                return blogInfoVOs;
            },
            /* 初始化数据 */
            async findAllBlogByFuzzyInit() {
                this.filterObj.userId = this.$store.state.user.id
                const data = await findAllBlogByFuzzy(this.filterObj)
                const blogInfoVOs = await this.commonMethod(data)
                this.blogInfoVOs = blogInfoVOs
                console.log(this.blogInfoVOs)
            },
            /* 进行条件查询所有博客 */
            async findAllBlogByFuzzy() {
                this.filterObj.userId = this.$store.state.user.id
                const data = await findAllBlogByFuzzy(this.filterObj)
                const blogInfoVOs = await this.commonMethod(data)
                this.blogInfoVOs = blogInfoVOs
                this.showDiv = true;
            },
            /* 查看所有博客 */
            async viewAllBlog() {
                this.filterObj.userId = this.$store.state.user.id
                this.filterObj.blogStatus = null
                const data = await findAllBlogByFuzzy(this.filterObj)
                const blogInfoVOs = await this.commonMethod(data)
                this.blogInfoVOs = blogInfoVOs
                console.log(this.blogInfoVOs)
            },
            /* 查看所有已发布的博客（公开的） */
            async viewPublicBlog() {
                this.filterObj.userId = this.$store.state.user.id
                this.filterObj.blogStatus = 1
                const data = await findAllBlogByFuzzy(this.filterObj)
                const blogInfoVOs = await this.commonMethod(data)
                this.blogInfoVOs = blogInfoVOs
                console.log(this.blogInfoVOs)
            },
            /* 查看所有私密的博客 */
            async viewPrivateBlog() {
                this.filterObj.userId = this.$store.state.user.id
                this.filterObj.blogStatus = 2
                const data = await findAllBlogByFuzzy(this.filterObj)
                const blogInfoVOs = await this.commonMethod(data)
                this.blogInfoVOs = blogInfoVOs
                console.log(this.blogInfoVOs)
            },
            /* 查看所有待审批的博客 */
            async viewAuditBlog() {
                this.filterObj.userId = this.$store.state.user.id
                this.filterObj.blogStatus = 3
                const data = await findAllBlogByFuzzy(this.filterObj)
                const blogInfoVOs = await this.commonMethod(data)
                this.blogInfoVOs = blogInfoVOs
                console.log(this.blogInfoVOs)
            },
            /* 查看所有回收站的博客 */
            async viewRecycleBlog() {
                this.filterObj.userId = this.$store.state.user.id
                this.filterObj.blogStatus = 4
                const data = await findAllBlogByFuzzy(this.filterObj)
                const blogInfoVOs = await this.commonMethod(data)
                this.blogInfoVOs = blogInfoVOs
                console.log(this.blogInfoVOs)
            },
            /* 查看所有草稿 */
            async viewDraftBlog() {
                this.filterObj.userId = this.$store.state.user.id
                this.filterObj.blogStatus = 0
                const data = await findAllBlogByFuzzy(this.filterObj)
                const blogInfoVOs = await this.commonMethod(data)
                this.blogInfoVOs = blogInfoVOs
                console.log(this.blogInfoVOs)
            },
            /* 重置搜索 */
            resetSearch() {
                this.findAllBlogByFuzzyInit();
                this.showDiv = false;
            },
            /* 查询所有博客类型 */
            async findAllBlogType() {
                const data = await findAllBlogType();
                this.blogTypes = data;
            },
            /* 查询所有的分类专栏 */
            async findAllCategoryColumn() {
                const data = await findAllCategoryColumn();
                this.blogClassifications = data
            },
            /* 博客状态总览数据 */
            async countForBlogManage() {
                const userId = this.$store.state.user.id
                const data = await countForBlogManage(userId)
                this.draftNumber = data.draftNumber
                this.publicNumber = data.publicNumber
                this.privateNumber = data.privateNumber
                this.auditNumber = data.auditNumber
                this.recycleNumber = data.recycleNumber
                this.totalNumber = data.allNumber
            },
            toViewBlog(blogId) {
                this.$router.push({
                    name: 'viewBlog',
                    query: {id: blogId}
                })
            },
            removeBlog() {

            }
        }
    }
</script>

<style scoped>
    .article-manage-container .ant-calendar-picker {
        min-width: unset !important;
    }

    .total-container {
        padding: 0;
        margin-top: 10px;
    }

    .total-container-top, .total-container-bottom {
        line-height: 50px;
        height: 50px;
        background: rgb(242, 245, 247);
    }

    .total-container-top-text, .total-container-top-date, .blog-classification, .blog-type, .keyword-input {
        float: left;
        margin-left: 10px;
    }

    .radio-blog-status {
        margin-left: 15px;
    }

    .blog-info-list {
        height: 80px;
        border-bottom: darkgray dashed 1px;
        padding-top: 10px;
    }

    .blog-info-title {
        width: 100%;
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 15px;
        padding: 0;
        display: flex;
        justify-content: left;
    }

    a {
        color: darkgray;
    }

    .blog-info-props {
        display: flex;
        justify-content: space-between;
    }

</style>
